<!DOCTYPE html>
{% load staticfiles i18n %}
{% load render_bundle from webpack_loader %}
{% load version %}

<html lang="{{ LANGUAGE_CODE }}" class="no-js">
  <head>
    <title>
      {% block title %}
        {% trans "Dashboard - Saleor" context "Dashboard default page title" %}
      {% endblock %}
    </title>
    {% block meta %}
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    {% endblock meta %}

    {% include 'favicon.html' %}
    {% render_bundle 'vendor' 'css' %}
    {% render_bundle 'dashboard' 'css' %}
    <link rel="stylesheet" type="text/css" href="{% static "versatileimagefield/css/versatileimagefield.css" %}">

    {% block custom_css %}{% endblock %}
  </head>

  <body class="{% block body_class %}body-home{% endblock %}">
    <header>
      <nav class="top-nav" id="top-nav">
        <div class="nav-wrapper">
          <div class="right">
            <ul id="user-action" class="dropdown-content">
              <li class="user-name">
                {{ request.user }}
              </li>
              <li class="divider"></li>
              <li>
                <a href="/" target="_blank" class="waves-effect waves-teal">
                  {% trans "Visit storefront" context "Dashboard top navigation action" %}
                </a>
                <a href="{% url "dashboard:styleguide" %}" target="_blank" class="waves-effect waves-teal">
                  {% trans "Style guide" context "Dashboard top navigation action" %}
                </a>
              </li>
              <li>
                <a href="{% url 'account_logout' %}" class="waves-effect waves-teal">
                  {% trans "Log out" context "Dashboard top navigation action" %}
                </a>
              </li>
            </ul>
            <a class="dropdown-button" data-constrainwidth="false" href="#" data-activates="user-action">
              <svg data-src="{% static "/dashboard/images/account_circle.svg" %}" width="24" height="24" fill="#fff" />
            </a>
            {% if SEARCH_IS_ENABLED %}
              <a href="{% url "dashboard:search" %}" class="hide-on-med-and-up dropdown-button">
                <svg data-src="{% static "dashboard/images/search.svg" %}" width="24" height="24" fill="#fff" />
              </a>
            {% endif %}
          </div>
          <ul class="left">
            <li>
              <a href="#" id="toggle-menu">
                <svg data-src="{% static "dashboard/images/mobile_menu.svg" %}" width="24" height="24" />
              </a>
            </li>
            <li>
              <a href="{% url 'dashboard:index' %}" class="logo">
                <svg data-src="{% static "dashboard/images/saleor_logo.svg" %}" height="38px" width="176px" />
              </a>
            </li>
            <li class="search">
              {% if SEARCH_IS_ENABLED %}
                <form method="get" action="{% url "dashboard:search" %}" class="hide-on-small-only">
                  <div class="input-field">
                    <input id="search" type="search" placeholder="{% trans "Search" context "Dashboard search" %}" name="q" value="{% if query %}{{ query }}{% endif %}">
                    <label>
                      <svg data-src="{% static "dashboard/images/search.svg" %}" width="24" height="24" fill="#fff" />
                    </label>
                  </div>
                </form>
              {% endif %}
            </li>
          </ul>
          <ul class="side-nav">
            <li class="nav-home">
              <a href="{% url 'dashboard:index' %}">
                {% trans "Home" context "Dashboard homepage" %}
              </a>
            </li>
            <li class="side-nav-section" id="first">
              <p>
                {% trans "Catalogue" context "Dashboard catalogue" %}
              </p>
              <ul>
                <li class="{% block menu_products_class %}{% endblock %}">
                  <a href="{% url 'dashboard:product-list' %}">
                    {% trans "Products" context "Dashboard products list" %}
                  </a>
                </li>
                <li class="{% block menu_categories_class %}{% endblock %}">
                  <a href="{% url 'dashboard:category-list' %}">
                    {% trans "Categories" context "Dashboard categories list" %}
                  </a>
                </li>
                <li class="{% block menu_location_class %}{% endblock %}">
                  <a href="{% url 'dashboard:product-stock-location-list' %}">
                  {% trans "Stock locations" context "Dashboard stock loactions list" %}
                  </a>
                </li>
              </ul>
            </li>
            <li class="side-nav-section">
              <p>
                {% trans "Discounts" context "Dashboard discounts list" %}
              </p>
              <ul>
                <li class="{% block menu_sales_class %}{% endblock %}">
                  <a href="{% url 'dashboard:sale-list' %}">
                    {% trans "Sales" context "Dashboard sales (discounts) list" %}
                  </a>
                </li>
                <li class="{% block menu_vouchers_class %}{% endblock %}">
                  <a href="{% url 'dashboard:voucher-list' %}">
                    {% trans "Vouchers" context "Dashboard vouchers list" %}
                  </a>
                </li>
              </ul>
            </li>
            <li class="side-nav-section">
              <p>
                {% trans "Sales" context "Dashboard sales. `Sales' is noun of to sell" %}
              </p>
              <ul>
                <li class="{% block menu_orders_class %}{% endblock %}">
                  <a href="{% url 'dashboard:orders' %}">
                    {% trans "Orders" context "Dashboard orders list" %}
                  </a>
                </li>
                <li class="{% block menu_customers_class %}{% endblock %}">
                  <a href="{% url 'dashboard:customers' %}">
                    {% trans "Customers" context "Dashboard customers list" %}
                  </a>
                </li>
              </ul>
            </li>
            <li class="side-nav-section">
              <p>
                {% trans "Configuration"  context "Dashboard configuration" %}
              </p>
              <ul>
                <li class="{% block menu_product_classes_class %}{% endblock %}">
                  <a href="{% url 'dashboard:product-class-list' %}">
                    {% trans "Product types" context "Dashboard product types list" %}
                  </a>
                </li>
                <li class="{% block menu_attributes_class %}{% endblock %}">
                  <a href="{% url 'dashboard:product-attributes' %}">
                    {% trans "Attributes" context "Dashboard attributes list" %}
                  </a>
                </li>
                <li class="{% block menu_delivery_class %}{% endblock %}">
                  <a href="{% url 'dashboard:shipping-methods' %}">
                    {% trans "Shipping methods" context "Dashboard shipping methods list" %}
                  </a>
                </li>
                <li class="{% block menu_settings_class %}{% endblock %}">
                  <a href="{% url 'dashboard:site-index' %}">
                    {% trans "Site settings" context "Dashboard site settings" %}
                  </a>
                </li>
              </ul>
            </li>
            {% if request.user.is_superuser %}
              <li class="side-nav-section" id="version-indicator">
                <p>
                  {% trans "Release:" context "Dashboard software version" %} {% version %}
                </p>
              </li>
            {% endif %}
          </ul>
        </div>
      </nav>
    </header>
    <div class="subheader top-nav">
      <div class="nav-wrapper container">
        {% block breadcrumbs %}
          <ul class="breadcrumbs">
            <li class="visible-s">
              <a href="#">
                {% trans "Home" context "Dashboard homepage" %}
              </a>
            </li>
          </ul>
        {% endblock %}
        {% block header_extra %}{% endblock %}
      </div>
    </div>
    <main class="main">
      <div class="container">
        {% block content %}{% endblock %}
      </div>
    </main>
    <div id="base-modal" class="modal"></div>
    <div id="base-modal-fixed" class="modal modal-fixed-footer"></div>

    <!-- Core Scripts - Include with every page -->
    <script type="text/javascript" src="{% url 'javascript-catalog' %}"></script>
    {% render_bundle 'vendor' 'js' %}
    {% render_bundle 'dashboard' 'js' %}
    <script src="{% static "versatileimagefield/js/versatileimagefield.js" %}"></script>
    {% include "dashboard/includes/_messages.html" %}

    {% block custom_js %}{% endblock %}
  </body>
</html>
